<template>
  <div class="app-container">
    <doc-alert title="工作流" url="https://doc.iocoder.cn/bpm" />
    <!--统计分析图-->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <lineChart :chart-data="lineChartData" :durationAvg="durationAvg" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <pieChart :chartData="pieChartData" :pieTotal="pieTotal" />
        </div>
      </el-col>
    </el-row>
    <!-- 搜索工作栏 -->
    <div class="search_div">
      <div class="title_img">待办任务</div>
      <div class="form">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="流程名" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入流程名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="main-table-content">
      <!--卡片形式，一行三列，一页六条-->
      <div class="launch-box">
        <div class="launch-list">
          <div>
            <div class="item-box" v-for="item in list" :key="item.id">
              <div class="item common-theme">
                <div class="item-info">
                  <div class="top">
                    <p class="p1">
                      表单名称：{{ item.formName || "暂无数据" }}
                    </p>
                    <p class="p2">所属流程：{{ item.processInstance.name }}</p>
                    <p class="table_style">
                      <span class="item_span">
                        <span>发起人</span>
                        <span>{{
                          item.processInstance.startUserNickname
                        }}</span>
                      </span>
                      <span class="item_span">
                        <span>发起时间</span>
                        <span>{{
                          parseTime(item.createTime) || "暂无数据"
                        }}</span>
                      </span>
                      <span class="item_span">
                        <span>当前节点</span>
                        <span>{{ item.name || "暂无数据" }}</span>
                      </span>
                    </p>
                  </div>
                  <div
                    class="button_style"
                    v-hasPermi="['bpm:task:update']"
                    @click="handleAudit(item)"
                  >
                    前往审批>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页组件 -->
      <div v-show="total > 0" class="hy_page">
        <el-pagination
          @size-change="getList"
          @current-change="getList"
          :current-page="queryParams.pageNo"
          :page-size="queryParams.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTodoTaskPage,
  getHourDurationDateLine,
  getProcessModelDue,
} from "@/api/bpm/task";
import { Card } from "element-ui";
import lineChart from "./chart/LineChart";
import PieChart from "./chart/PieChart";
export default {
  name: "Todo",
  components: {
    lineChart,
    PieChart,
    Card,
  },
  data() {
    return {
      lineChartData: {
        expectedData: [],
        actualData: [],
      },
      durationAvg: "",
      pieChartData: {
        xAxios: [],
        yAxios: [],
      },
      pieTotal: 0,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 待办任务列表
      list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 6,
        name: null,
        createTime: [],
      },
    };
  },
  created() {
    this.getList();
    this.getHourDurationDateLine();
    this.getProcessModelDue();
  },
  methods: {
    /**获取待办任务的任务耗时数据 */
    getHourDurationDateLine() {
      getHourDurationDateLine().then((response) => {
        const { data } = response;
        this.lineChartData.expectedData = data.ydata;
        this.lineChartData.actualData = data.xdata;
        this.durationAvg = String(data.durationAvg);
      });
      console.log("ss:", this.lineChartData);
    },
    /**流程待办分类统计 */
    getProcessModelDue() {
      getProcessModelDue().then((response) => {
        const { data } = response;
        let pieData = [];
        let xAxios = [];
        let total = 0;
        if (data.length === 0) return;
        data.forEach((item) => {
          let obj = {};
          obj.value = item.count;
          obj.name = item.categoryName;
          pieData.push(obj);
          xAxios.push(item.categoryName);
          total += Number(item.count);
        });
        this.pieChartData.yAxios = pieData;
        this.pieChartData.xAxios = xAxios;
        this.pieTotal = total;
        console.log(this.pieChartData, this.pieTotal);
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      getTodoTaskPage(this.queryParams).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 处理审批按钮 */
    handleAudit(row) {
      this.$router.push({
        path: "/task/process-instance/detail",
        query: { id: row.processInstance.id },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .search_div {
    display: flex;
    height: 35px;
    align-items: center;
    .title_img {
      width: 100px;
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      line-height: 24px;
    }
    .form {
      margin-left: auto;
    }
  }
  .main-table-content {
    //margin-top: 20px;
    width: 100%;
    overflow: hidden;
    .launch-box {
      height: 100%;

      .launch-list {
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 9%;

        .item-box {
          float: left;
          height: 185px;
          width: 33.3%;
          padding: 0 5px;
          margin-bottom: 10px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;

          .common-theme {
            display: flex;
            padding: 5px 20px !important;
            width: 100%;
            color: #303133;
            background: #fff;
            border: 1px solid #ebeef5;
            border-radius: 12px;
            overflow: hidden;
            -webkit-transition: 0.3s;
            transition: 0.3s;
            -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
            box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1);
            position: relative;

            .item-info {
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              width: 100%;
              display: flex;
              flex-direction: column;
              .top {
                flex: 1;
                border-bottom: 1px solid #eeeeee;
                .p1 {
                  font-size: 16px;
                  font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                  font-weight: 500;
                  color: #333333;
                  line-height: 24px;
                }
                .p2 {
                  background: rgba(72, 119, 238, 0.1);
                  border-radius: 4px;
                  padding: 5px 0;
                }
                .table_style {
                  display: flex;
                  .item_span {
                    margin-right: 15px;
                    display: flex;
                    flex-direction: column;
                    span:nth-child(1) {
                      font-size: 12px;
                      font-weight: 400;
                      color: #999999;
                      line-height: 18px;
                    }
                    span:nth-child(2) {
                      font-size: 14px;
                      font-weight: 500;
                      color: #666666;
                      line-height: 20px;
                    }
                  }
                }
              }
              .button_style {
                cursor: pointer;
                margin-top: 8px;
                text-align: end;
                font-size: 14px;
                font-family: SourceHanSansSC-Medium, SourceHanSansSC;
                font-weight: 500;
                color: #4877ee;
              }
            }
          }
        }
      }
    }
    .hy_page {
      float: right;
      margin-top: 20px;
    }
  }
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 10px;
  }
}
</style>
